<template>
    <!-- 订单管理 -->
    <div class="p-2">
        <!-- 头部搜索 -->
        <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
            :leave-active-class="proxy?.animate.searchAnimate.leave">
            <div class="mb-[10px]" v-show="showSearch">
                <el-card shadow="hover">
                    <el-form ref="queryFormRef" :model="queryParams" :inline="true">

                        <el-form-item label="订单号" prop="sn">
                            <el-input v-model.trim="queryParams.sn" placeholder="请输入" clearable style="width: 200px" />
                        </el-form-item>
                        <el-form-item label="订单状态" prop="tionsenc" style="width: 230px">
                            <el-select v-model="tionsenc" multiple collapse-tags placeholder="请选择" @change="tionsenu"
                                clearable>
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="支付流水号" prop="outTradeNo">
                            <el-input v-model.trim="queryParams.outTradeNo" placeholder="请输入" clearable style="width: 200px" />
                        </el-form-item>
                        <el-form-item label="创建时间" style="width: 308px;">
                            <el-date-picker v-model="huonetime" type="daterange" start-placeholder="开始时间"
                                end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
                                @change="tionmetin()" :default-time="defaultTime" style="max-width: 60vw" />
                        </el-form-item>

                        <!-- 折叠面板 -->
<!--                        <el-form-item label="卖家ID" prop="sellerId" v-show="tuonsein">-->
<!--                            <el-input v-model.trim="queryParams.sellerId" placeholder="请输入" clearable style="width: 200px" />-->
<!--                        </el-form-item>-->
                        <el-form-item label="用户ID" prop="userId" v-show="tuonsein">
                            <el-input v-model.trim="queryParams.userId" placeholder="请输入" clearable style="width: 200px" />
                        </el-form-item>
                        <el-form-item label="商品SN" prop="goodsSn" v-show="tuonsein">
                            <el-input v-model.trim="queryParams.goodsSn" placeholder="请输入" clearable style="width: 200px" />
                        </el-form-item>
<!--                        <el-form-item label="手机号" prop="mobile" v-show="tuonsein">-->
<!--                            <el-input v-model.trim="queryParams.mobile" placeholder="请输入" clearable style="width: 200px" />-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="订单时间" style="width: 308px;" v-show="tuonsein">-->
<!--                            <el-date-picker v-model="muionsecu" type="daterange" start-placeholder="开始时间"-->
<!--                                end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"-->
<!--                                @change="tonsemcui()" :default-time="defaultTime" style="max-width: 60vw" />-->
<!--                        </el-form-item>-->


                        <el-form-item v-hasPermi="['oms:order:query']">
                            <el-button type="primary" icon="Search" @click="handleQuery()">搜索</el-button>
                            <el-button icon="Refresh" @click="resetQuery()">重置</el-button>
                            <!-- 向下展开箭头 -->
                            <el-button link :icon="`${tuonsein ? 'ArrowUp' : 'ArrowDown'}`"
                                @click="tuonsein = !tuonsein"></el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>
        </transition>
        <!-- 列表主体内容 -->
        <el-card shadow="hover">
            <!-- 导出和隐藏列 -->
<!--            <template #header>-->
<!--                <el-row :gutter="10" class="mb8">-->
<!--                    <el-col :span="1.5">-->
<!--                        <el-button type="warning" plain icon="Download" @click="handleExport()"-->
<!--                            v-hasPermi="['oms:order:export']">导出</el-button>-->
<!--                    </el-col>-->
<!--                    <right-toolbar v-model:showSearch="showSearch" :columns="columns" @queryTable="getList"-->
<!--                        :search="true"></right-toolbar>-->
<!--                </el-row>-->
<!--            </template>-->
            <!-- 列表内容 -->
            <el-table :data="ordersListl" v-loading="loading" max-height="500" border>
                <el-table-column label="订单编号" prop="sn" align="center" width="200" v-if="columns[0].visible" />
                <el-table-column label="用户ID" prop="userId" align="center" width="200" v-if="columns[1].visible" />
                <el-table-column label="支付流水号" prop="outTradeNo" width="200" align="center" v-if="columns[2].visible" />
                <el-table-column label="订单状态" align="center" width="150" v-if="columns[3].visible">
                    <template #default="scope">
                        {{ oiundstuon(scope.row.orderStatus) }}
<!--                        <div class="conseuinl" @click="tionsein(scope.row)"-->
<!--                            v-if="scope.row.orderStatus == 'DELIVER' || scope.row.orderStatus == 'COMPLETE'">-->
<!--                            查看物流-->
<!--                        </div>-->
                    </template>
                </el-table-column>
<!--                <el-table-column label="收件人信息" align="center" width="300" v-if="columns[4].visible">-->
<!--                    <template #default="scope">-->
<!--                        <div class="lioneuo">-->
<!--                            <el-row>-->
<!--                                <el-col :span="7" class="cuionseti">-->
<!--                                    收货信息：-->
<!--                                </el-col>-->
<!--                                <el-col :span="17">-->
<!--                                    {{ scope.row.contactsName }} ，{{ scope.row.contactsMobile }}-->
<!--                                </el-col>-->
<!--                            </el-row>-->
<!--                            <el-row>-->
<!--                                <el-col :span="7" class="cuionseti">-->
<!--                                    收货地址：-->
<!--                                </el-col>-->
<!--                                <el-col :span="17">-->
<!--                                    {{ scope.row.contactsAddress }} ，{{ scope.row.contactsDetail }}-->
<!--                                </el-col>-->
<!--                            </el-row>-->
<!--                        </div>-->
<!--                    </template>-->
<!--                </el-table-column>-->
<!--                <el-table-column label="商品成本价格" width="120" align="center" v-if="columns[5].visible">-->
<!--                    <template #default="scope">￥{{ scope.row.costPrice }}</template>-->
<!--                </el-table-column>-->
                <el-table-column label="总价格" align="center" width="120" v-if="columns[6].visible">
                    <template #default="scope">￥{{ scope.row.flowPrice }}</template>
                </el-table-column>
                <el-table-column label="商品信息" align="center" width="300" v-if="columns[7].visible">
                    <template #default="scope">
                        <div class="lioneuo">
                            <el-row>
                                <el-col :span="7" class="cuionseti">
                                    ID：
                                </el-col>
                                <el-col :span="17">
                                    {{ scope.row.goodsId }}
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="7" class="cuionseti">
                                    SN：
                                </el-col>
                                <el-col :span="17">
                                    {{ scope.row.goodsSn }}
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="7" class="cuionseti">
                                    名称：
                                </el-col>
                                <el-col :span="17">
                                    {{ scope.row.goodsName }}
                                </el-col>
                            </el-row>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="支付方式" align="center" v-if="columns[8].visible">
                    <template #default="scope">{{ tiomuonse(scope.row.payMethod) }}</template>
                </el-table-column>
                <el-table-column label="订单时间" align="center" width="230" v-if="columns[9].visible">
                    <template #default="scope">
                        <div class="lioneuo">
                            <div v-if="scope.row.payTime != ''">
                                <span class="cuionseti">支付时间：</span>
                                {{ scope.row.payTime.slice(0, -3) }}
                            </div>
                            <div v-if="scope.row.completeTime != ''">
                                <span class="cuionseti">完成时间：</span>
                                {{ scope.row.completeTime.slice(0, -3) }}
                            </div>
                            <div v-if="scope.row.cancelTime != ''">
                                <span class="cuionseti">取消时间：</span>
                                {{ scope.row.cancelTime.slice(0, -3) }}
                            </div>
                        </div>
                    </template>
                </el-table-column>
<!--                <el-table-column label="返佣信息" align="center" width="300" v-if="columns[10].visible">-->
<!--                    <template #default="scope">-->
<!--                        <div class="lioneuo">-->
<!--                            <el-row v-if="scope.row.sellerId != 0">-->
<!--                                <el-col :span="9" class="cuionseti">-->
<!--                                    寄卖ID：-->
<!--                                </el-col>-->
<!--                                <el-col :span="15">-->
<!--                                    {{ scope.row.sellerId }}-->
<!--                                </el-col>-->
<!--                            </el-row>-->

<!--                            <el-row v-if="scope.row.saleRebate != 0">-->
<!--                                <el-col :span="9" class="cuionseti">-->
<!--                                    寄卖差价：-->
<!--                                </el-col>-->
<!--                                <el-col :span="15">-->
<!--                                    {{ scope.row.saleRebate }}-->
<!--                                </el-col>-->
<!--                            </el-row>-->

<!--                            <el-row v-if="scope.row.directBuyerId != 0">-->
<!--                                <el-col :span="9" class="cuionseti">-->
<!--                                    买家直推ID：-->
<!--                                </el-col>-->
<!--                                <el-col :span="15">-->
<!--                                    {{ scope.row.directBuyerId }}-->
<!--                                </el-col>-->
<!--                            </el-row>-->

<!--                            <el-row v-if="scope.row.directBuyerRebate != 0">-->
<!--                                <el-col :span="9" class="cuionseti">-->
<!--                                    买家直推返佣：-->
<!--                                </el-col>-->
<!--                                <el-col :span="15">-->
<!--                                    {{ scope.row.directBuyerRebate }}-->
<!--                                </el-col>-->
<!--                            </el-row>-->

<!--                            <el-row v-if="scope.row.indirectBuyerId != 0">-->
<!--                                <el-col :span="9" class="cuionseti">-->
<!--                                    买家间推ID：-->
<!--                                </el-col>-->
<!--                                <el-col :span="15">-->
<!--                                    {{ scope.row.indirectBuyerId }}-->
<!--                                </el-col>-->
<!--                            </el-row>-->

<!--                            <el-row v-if="scope.row.indirectBuyerRebate != 0">-->
<!--                                <el-col :span="9" class="cuionseti">-->
<!--                                    买家间推返佣：-->
<!--                                </el-col>-->
<!--                                <el-col :span="15">-->
<!--                                    {{ scope.row.indirectBuyerRebate }}-->
<!--                                </el-col>-->
<!--                            </el-row>-->

<!--                            <el-row v-if="scope.row.directSellerId != 0">-->
<!--                                <el-col :span="9" class="cuionseti">-->
<!--                                    卖家直推ID：-->
<!--                                </el-col>-->
<!--                                <el-col :span="15">-->
<!--                                    {{ scope.row.directSellerId }}-->
<!--                                </el-col>-->
<!--                            </el-row>-->

<!--                            <el-row v-if="scope.row.directSellerRebate != 0">-->
<!--                                <el-col :span="9" class="cuionseti">-->
<!--                                    卖家直推返佣：-->
<!--                                </el-col>-->
<!--                                <el-col :span="15">-->
<!--                                    {{ scope.row.directSellerRebate }}-->
<!--                                </el-col>-->
<!--                            </el-row>-->

<!--                            <el-row v-if="scope.row.indirectSellerId != 0">-->
<!--                                <el-col :span="9" class="cuionseti">-->
<!--                                    卖家间推ID：-->
<!--                                </el-col>-->
<!--                                <el-col :span="15">-->
<!--                                    {{ scope.row.indirectSellerId }}-->
<!--                                </el-col>-->
<!--                            </el-row>-->

<!--                            <el-row v-if="scope.row.indirectSellerRebate != 0">-->
<!--                                <el-col :span="9" class="cuionseti">-->
<!--                                    卖家间推返佣：-->
<!--                                </el-col>-->
<!--                                <el-col :span="15">-->
<!--                                    {{ scope.row.indirectSellerRebate }}-->
<!--                                </el-col>-->
<!--                            </el-row>-->
<!--                        </div>-->
<!--                    </template>-->
<!--                </el-table-column>-->

<!--                <el-table-column label="京东仓库编码" prop="warehouseCode" width="120" align="center"-->
<!--                    v-if="columns[11].visible" />-->

                <el-table-column label="创建时间" width="160" fixed="right" align="center" v-if="columns[12].visible">
                    <template #default="scope">
                        {{ scope.row.createTime.slice(0, -3) }}
                    </template>
                </el-table-column>

                <el-table-column label="操作" align="center" fixed="right" width="130">
                    <template #default="scope">
<!--                        <el-tooltip content="详情" placement="top">-->
<!--                            <el-button link type="primary" icon="View" @click="huonetio(scope.row)"></el-button>-->
<!--                        </el-tooltip>-->
<!--                        <el-tooltip content="拦截" placement="top" v-if="scope.row.orderStatus == 'DELIVER'">-->
<!--                            <el-button link type="primary" icon="Failed" @click="huonsetui(scope.row.sn)"-->
<!--                                v-hasPermi="['oms:order:cancelDeliver']"></el-button>-->
<!--                        </el-tooltip>-->
                        <el-tooltip content="退款" placement="top"
                            v-if="scope.row.orderStatus == 'DELIVER' || scope.row.orderStatus == 'COMPLETE'">
                            <el-button link type="primary" icon="SetUp" @click="tuoneduin(scope.row.id)"
                                v-hasPermi="['oms:order:refund']"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <div class="dinseuom">
                <!-- 订单统计 -->
                <statistics :statistics="suinaeuint"></statistics>
                <!-- 分页 -->
                <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" @pagination="getList"
                    v-model:limit="queryParams.pageSize" />
            </div>

        </el-card>
        <!-- 查看物流信息弹窗 -->
        <el-dialog title="物流信息" v-model="dialogVisible.visible" width="500px" append-to-body v-if="dialogVisible.visible">
            <el-timeline>
                <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.operationtime">
                    {{ activity.content }}
                </el-timeline-item>
            </el-timeline>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="dialogVisible.visible = false">确 定</el-button>
                    <el-button @click="dialogVisible.visible = false">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup name="Order" lang="ts">
import { listOrder, getRefund, putccanel, getlogistics, statisui } from '@/api/operates/order/index';
import { OrderQuery, OrderVO, logistVO, TiktokOrderStatistics } from '@/api/operates/order/types';
const router = useRouter();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const columns = ref<FieldOption[]>([
    { key: 0, label: `订单编号`, visible: true, children: [] },
    { key: 1, label: `用户ID`, visible: true, children: [] },
    { key: 2, label: `支付流水号`, visible: true, children: [] },
    { key: 3, label: `订单状态`, visible: true, children: [] },
    { key: 4, label: `收件人信息`, visible: true, children: [] },
    { key: 5, label: `商品成本价格`, visible: true, children: [] },
    { key: 6, label: `总价格`, visible: true, children: [] },
    { key: 7, label: `商品信息`, visible: true, children: [] },
    { key: 8, label: `支付方式`, visible: true, children: [] },
    { key: 9, label: `订单时间`, visible: true, children: [] },
    { key: 10, label: `返佣信息`, visible: true, children: [] },
    { key: 11, label: `京东仓库编码`, visible: true, children: [] },
    { key: 12, label: `创建时间`, visible: true, children: [] },
])

const initFormData: OrderVO = {
    id: '',
    sn: '',
    userId: '',
    agentId: '',
    outTradeNo: '',
    orderStatus: '',
    contactsName: '',
    contactsMobile: '',
    contactsAddress: '',
    contactsDetail: '',
    costPrice: 0,
    flowPrice: 0,
    goodsId: '',
    goodsSn: '',
    goodsName: '',
    goodsCover: '',
    payTime: '',
    payMethod: '',
    payMerchant: '',
    cancelTime: '',
    completeTime: '',
    sellerId: '',
    saleRebate: 0,
    directBuyerId: '',
    directBuyerRebate: 0,
    indirectBuyerId: '',
    indirectBuyerRebate: 0,
    directSellerId: '',
    directSellerRebate: 0,
    indirectSellerId: '',
    indirectSellerRebate: 0,
    warehouseCode: '',
    createTime: '',
}
const data = reactive<PageData<OrderVO, OrderQuery>>({
    form: { ...initFormData },
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        goodsSn: '',
        sn: '',
        sellerId: '',
        userId: '',
        outTradeNo: '',
        mobile: '',
        orderStatus: '',
        startTime: '',
        endTime: '',
        compeleStartTime: '',
        completeEndTime: '',
    },
    rules: {},
})
const { queryParams, form } = toRefs(data)

const tuonsein = ref(false)
const huonetime = ref('')
const muionsecu = ref('')
const ordersListl = ref<OrderVO[]>([]);
const suinaeuint = ref<TiktokOrderStatistics>();
const tionsenc = ref([])
const activities = ref<logistVO[]>([])
const total = ref(0);
const loading = ref(true)
const showSearch = ref(true)
const queryFormRef = ref<ElFormInstance>();
const dialogVisible = reactive<DialogOption>({
    visible: false,
});
/**
 * 查询的订单状态
 */
const options = [
    {
        value: 'UNPAID',
        label: '未支付',
    },
    {
        value: 'DELIVER',
        label: '已发货',
    },
    {
        value: 'COMPLETE',
        label: '已完成',
    },
    {
        value: 'CANCEL',
        label: '已取消',
    }
]
/**
 * 默认时间
 */
const defaultTime = ref<[Date, Date]>([
    new Date(2000, 1, 1, 0, 0, 0),
    new Date(2000, 2, 1, 23, 59, 59),
])

/**
 * 订单状态
 */
const oiundstuon = (val: string) => {
    if (val === 'UNPAID') {
        return '未支付'
    } else if (val === 'DELIVER') {
        return '已发货'
    } else if (val === 'COMPLETE') {
        return '已完成'
    } else if (val === 'CANCEL') {
        return '已取消'
    }
}

/**
 * 支付方式
 */
const tiomuonse = (val: string) => {
    if (val === 'BANK') {
        return '银行卡'
    } else if (val === 'WECHAT') {
        return '微信'
    } else if (val === 'ALIPAY') {
        return '支付宝'
    }
}

/**
 * 支付商户
 */
const muioseuinc = (val: string) => {
    if (val === 'TONGLIAN') {
        return '通联'
    } else if (val === 'SHANPING') {
        return '尚品玉液'
    }
}

/** 导出按钮操作 */
const handleExport = () => {
    proxy?.download("order/export", {
        ...queryParams.value
    }, `订单记录.xlsx`);
}

/**
 * 查询订单列表
 */
const getList = async () => {
    loading.value = true;
    const res = await listOrder(queryParams.value);
    ordersListl.value = res.data.list;
    total.value = res.data.total;
    loading.value = false;
}

/**
 * 查询订单统计
 */
const getSuinseun = async () => {
    const { data } = await statisui(queryParams.value);
    // console.log(data);
    suinaeuint.value = data;
}

/**
 * 查询物流信息
 */
const tionsein = async (row?: OrderVO) => {
    const Id = row?.id;
    const res = await getlogistics(Id)
    activities.value = res.data;
    dialogVisible.visible = true;
}

/**
 * 搜索按钮操作
 */
const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getList();
    getSuinseun()
}

/**
 * 重置搜索
 */
const resetQuery = () => {
    queryFormRef.value?.resetFields();
    huonetime.value = '';
    tionmetin();

    muionsecu.value = '';
    tonsemcui()

    tionsenc.value = [];
    tionsenu();
    handleQuery();
}
/**
 * 查询的订单状态
 */
const tionsenu = () => {
    if (tionsenc.value.length > 0) {
        queryParams.value.orderStatus = tionsenc.value.join(",");
    } else {
        tionsenc.value = [];
        queryParams.value.orderStatus = '';
    }
}
/**
 * 查询的订单创建时间
 */
const tionmetin = () => {
    if (huonetime.value != null) {
        // 开始时间
        queryParams.value.startTime = huonetime.value[0];
        // 结束时间
        queryParams.value.endTime = huonetime.value[1];
    } else {
        huonetime.value = '';
        queryParams.value.startTime = '';
        queryParams.value.endTime = '';
    }
}
/**
 * 查询的订单完成时间
 */
const tonsemcui = () => {
    if (muionsecu.value != null) {
        // 开始时间
        queryParams.value.compeleStartTime = muionsecu.value[0];
        // 结束时间
        queryParams.value.completeEndTime = muionsecu.value[1];
    } else {
        muionsecu.value = '';
        queryParams.value.compeleStartTime = '';
        queryParams.value.completeEndTime = '';
    }
}
/**
 * 列表订单退款
 */
const tuoneduin = async (id: string) => {
    try {
        await proxy?.$modal.confirm(`是否退款`);
        await getRefund(id);
        getList();
        proxy?.$modal.msgSuccess("退款成功");
    } catch (error) {
    }
}
/**
 * 列表订单拦截
 */
const huonsetui = async (sn: string) => {
    try {
        await proxy?.$modal.confirm(`是否拦截`);
        await putccanel(sn);
        getList();
        proxy?.$modal.msgSuccess("拦截成功");
    } catch (error) {
    }
}
/**
 * 列表订单详情
 */
const huonetio = async (row: OrderVO) => {
    const id = row.id;
    router.push({
        // path: `/order/detail/${id}`
        name: "Detail",
        params: {
            id
        }
    });
}


onMounted(() => {
    getList();
    getSuinseun();
});
</script>

<style scoped>
.conseuinl {
    color: #f00404;
    line-height: 25px;
    cursor: pointer;
}
</style>
